<template>
	<div class="ex-display">
		<HeadTitle :title="modal" @callback="back"></HeadTitle>
		<div class="wrapper">
			<ul class="item-content">
				<li class="item">
					<span>商品名称</span>
					<input type="text" placeholder="最多8个字符" maxlength="8" v-model.trim="commodityName">
				</li>
				<li class="item">
					<span>商品价格</span>
					<input type="number" placeholder="请输入价格" maxlength="11" v-model.trim="price" @input="currency('price')">
				</li>
				<li class="item picture">
					<p>商品图片</p>
					<!-- 请上传小于500K的图片 -->
					<div class="UpLoadIMG">
						<div class="report-pic" v-for='(item,index) in imgurl'>
							<img :src="item"  v-preview="item">
							<label class="delect" @click='delpicture(item)'>x</label>
						</div>
						<div class="report-file" v-show='imgurl.length < 4'>
							<span>
								<i class="iconfont">&#xe608;</i>
								<br>
								上传照片
							</span>
							<input type="file" name="" class="file-prew" id="frontPic" @change="getfile" accept="image/*"/>
						</div>
					</div>
				</li>
			</ul>
			<ul class="item-content">
				<li class="item" @click="openTypeList">
					<span>商品分类</span>
					<label class="right">
						{{typeName}}
						<i class="iconfont" >&#xe606;</i>
					</label>
				</li>
			</ul>
			<ul class="item-content option-wrapper">
				<li class="item" @click="todisplay4">
					<span>店铺分组</span>
					<label class="right">
						编辑
						<i class="iconfont">&#xe606;</i>
					</label>
				</li>
				<li class="item-option groupList" v-if="groupList.length !== 1">
					<div :class="{'select': groupId === item.id}" v-for="(item,index) in groupList" @click="selground(item.id)" v-if='item.id !==0'>
						<span class="option"></span>
						{{item.groupName}}
					</div>
				</li>
			</ul>
		</div>
		<div class="ex-button">
			<button @click="save" :class="{disable:disableBtn}">提交</button>
		</div>

		<div class="modal_BJ" v-show="isTypeList">
			<div class="modal">
				<div class="modal_box">
					<div class="title">商品分类</div>
					<div class="field">
						<ul>
							<li v-for="(item,index) in TypeList" @click="seltype(item.id,item.typeName)">
								<span>{{item.typeName}}</span>
								<span class="option" :class="{'select': selcommodityTypeId === item.id}"></span>
							</li>
						</ul>
					</div>
					<div class="operate">
						<span href="javascript:void(0)" class="link gray" @click="cancle">取消</span>
						<span href="javascript:void(0)" class="link" @click="confirm">确定</span>
					</div>
				</div>
			</div>
		</div>
		<!-- <Popup
			 v-model="isTypeList"
			 position="bottom"
			 class="ex-picker"
      		>
      		<Picker 
      		:slots="TypeList" 
      		:defaultIndex="defaultIndex"
      		:showToolbar="true"
      		@change="changeType"
      		>
      			<slot>
				    <b class="ex-sexslot" @click="selType">确认</b>
				</slot>	
      		</Picker>
      	</Popup> -->
      	<lg-preview></lg-preview>
	</div>
</template>
<script>
import axios from "axios"
import qs from "qs"
import lrz from 'lrz'
import { MessageBox, Indicator, Toast , Popup ,Picker } from 'mint-ui'
import HeadTitle from '../common/title.vue'
export default {
	data(){
		return{
			groupList: [],
			TypeList:[],
			detailList: [],
			isTypeList: false,
			typeName:'',
			seltypeName: '',
			commodityTypeId: '',
			status: '',
			selcommodityTypeId:'',
			imgurl: [],
			imgbase64: [],
			imgArray: [],
			groupId: '',
			commodityName: '',
			price:'',
			modal: {
				text:'商品编辑',
				fixed: false
			},
			submitbtn: false,
			islrz: false,
		}
	},
	components: {
		HeadTitle,
		Popup,
		Picker,
	},
	computed:{
		disableBtn () {
			let rule1 = /^\d+(\.?\d{1,2})?$/
			if(!this.commodityName || !this.price || !rule1.test(this.price ) || this.imgurl.length <= 0 || !this.commodityTypeId){
				return true
			}else{
				return false
			}
		},
		id () {
			return this.$route.query.id
		},
	},
	methods: {
		back () {
			this.$router.back();
		},
		todisplay4 () {
			this.$router.push('/display4')
		},
		openTypeList () {
			this.isTypeList = true
		},
		cancle () {
			this.isTypeList = false
			if(!this.commodityTypeId){
				this.selcommodityTypeId = ''
				this.seltypeName = ''
				return
			}
			this.selcommodityTypeId = this.commodityTypeId
		},
		confirm () {
			this.isTypeList = false
			if(this.selcommodityTypeId !== this.commodityTypeId){
				this.typeName = this.seltypeName
				this.commodityTypeId = this.selcommodityTypeId
			}
		},
		seltype (id,typeName) {
			this.selcommodityTypeId = id
			this.seltypeName = typeName
		},
		selground (id) {
			this.groupId = id
		},
		getfile () {
			let _this = this
			let img = document.getElementById('frontPic').files[0]
			if (img) {
				this.islrz = true
				Indicator.open({
				  text: '图片压缩中...',
				  spinnerType: 'fading-circle'
				})
				lrz(img,{width:640})
				.then(function (rst) {
					// console.log(rst,rst.file.size/1024)
					// if (rst.base64/1024 > 500) {
					// 	MessageBox('提示', '图片大于500K无法使用!')
					// 	return
					// }
					Indicator.close()
			        _this.imgbase64.push(rst.base64)
			        _this.imgurl.push(rst.base64)
			        _this.islrz = false
			    })
	       		.catch(function (err) {
	       			Indicator.close()
	       			_this.islrz = false
	      			_this.imgbase64.push('') 
	      			_this.imgurl.push('')
	      			Toast('图片压缩失败')
	       		})  
			}
		},
		delpicture (value) {
			Array.prototype.remove = function(val) {
				var index = this.indexOf(val);
				if (index > -1) {
					this.splice(index, 1);
				}
			};
			let _this = this
			MessageBox({
			  title: '提示',
			  message: '确认删除该图片吗？',
			  showCancelButton: true,
			  confirmButtonText: '删除'
			}).then(action => {
				if (action === 'confirm') {
					_this.imgurl.remove(value)
					_this.imgArray.remove(value)
					_this.imgbase64.remove(value)
					// console.log(_this.imgurl,_this.imgArray,_this.imgbase64)
				} else {
					return
				}
			})
		},
		save () {
			if (this.submitbtn) {
				return
			}
			if(!this.commodityName){
				MessageBox('提示', '商品名称不能为空!')
				return
			}
			if (! /^\d+(\.?\d{1,2})?$/.test(this.price) || this.price*1 === 0) {
				MessageBox('提示', '商品价格不正确!')
				return
			}
			if (this.imgurl.length < 1) {
				MessageBox('提示', '商品图片不能为空!')
				return
			}
			if (this.commodityTypeId === '') {
				MessageBox('提示', '请选择商品分类!')
				return
			}
			if (this.islrz) {
				MessageBox('提示', '图片压缩中请稍后重试')
				return
			}
			this.submitbtn = true
			this.UpLoadIMG()
		},
		UpLoadIMG () {
			let _this = this
			let formData = new FormData()
			if(this.imgbase64.length<1){
				_this.edictgoods()
				return
			}
			for (let i =0, j = this.imgbase64.length; i<j; i++) {
				formData.append("imgStr", this.imgbase64[i])
			}
			Indicator.open({
			  text: '图片处理中...',
			  spinnerType: 'fading-circle'
			})
			axios.post('/exsd-web/upload/pic_min',formData)
			.then(function(res){
				Indicator.close()
				if (res.data.code === '10000') {
					_this.imgArray.push(...res.data.urls)
					_this.edictgoods()
				} else {
					_this.submitbtn = false
					Toast(res.data.msg)
				}
			})
			.catch(function(res){
				_this.submitbtn = false
				Indicator.close()
				Toast('连接失败，请检查网络是否正常!')
			})	
		},
		edictgoods () {
			let _this = this
			// console.log(this.imgArray)
			Indicator.open({
			  text: '提交中...',
			  spinnerType: 'fading-circle'
			})
			axios.post('/exsd-web/commodityInfo/update',qs.stringify({
				id: _this.id,
				commodityName: _this.commodityName,
				commodityTypeId: _this.commodityTypeId,
				groupId: _this.groupId,
				price: _this.price,
				status: _this.status,
				commodityPictures: _this.imgArray.join(',')
			}))
			.then(function(res){
				Indicator.close()
				if (res.data.code === '10000') {
					MessageBox({
					  title: '提示',
					  message: '编辑成功！',
					}).then(action => {
						_this.$router.go(-1)
					})
				} else {
					_this.submitbtn = false
					Toast(res.data.msg)
				}
			})
			.catch(function(res){
				_this.submitbtn = false
				Indicator.close()
				Toast('连接失败，请检查网络是否正常!')
			})
		},
		getGroupList () {
				let _this = this
				axios.post('/exsd-web/commodityGroup/list',qs.stringify({})).then(function(res){
					if (res.data.code === '10000') {
						_this.groupList = res.data.data.list
						//console.log(_this.groupList)
					} else {
						Toast(res.data.msg)
					}
				}).catch(function(){
						Toast('连接失败，请检查网络是否正常!')
				})
		},
		getList() {
			let _this = this
			axios.post('/exsd-web/commodityType/list',qs.stringify({})).then(function(res){
				if (res.data.code === '10000') {
					_this.TypeList = res.data.data
				} else {
					Toast(res.data.msg)
				}
			}).catch(function(){
				_this.nodateStatus = true
					Toast('连接失败，请检查网络是否正常!')
			})
		},
		getDetail () {
			let _this = this
			axios.post('/exsd-web/commodityInfo/get',qs.stringify({
				id: _this.id
			})).then(function(res){
				if (res.data.code === '10000') {
					_this.detailList = res.data.data
					_this.commodityName = res.data.data.commodityName
					_this.price = res.data.data.price
					_this.groupName = res.data.data.groupName
					_this.selcommodityTypeId = res.data.data.commodityTypeId
					_this.commodityTypeId = res.data.data.commodityTypeId
					_this.status = res.data.data.status
					_this.typeName = _this.$route.query.typeName
					_this.groupId = _this.$route.query.groupId*1
					let Arr = res.data.data.commodityAffixEntityList
					Arr.forEach(function(v,k){
						_this.imgurl.push(v.filePath)
						_this.imgArray.push(v.filePath)
					})
				} else {
					Toast(res.data.msg)
				}
			}).catch(function(){
				_this.nodateStatus = true
					Toast('连接失败，请检查网络是否正常!')
			})
		},
		currency (id) {
			let value = this[id];
			this[id] = value.replace(/\s/g,'').replace(/^([0-9]{1,})(\.+)$/,'$1.').replace(/^([0-9]{1,})(\.[0-9]{1,2})(.*)$/,'$1$2')
		},
		back () {
			this.$router.back();
		},
		todisplay3 () {
			if(this.isedit){
				return
			}
			this.$router.push('/display3')
		},
		preimg (url) {
			this.imgpre.url = url;
			this.imgpre.show = true
		},
		hidepre () {
			this.imgpre.show = false;
			this.imgpre.url = ''
		}
	},
	created () {
		this.getGroupList()
		this.getList()
		this.getDetail()
	},
}
</script>
<style scoped>
.ex-display {width: 100%;background: #f4f5f7;color: #212a32;overflow-x: hidden;padding-bottom: 56px;min-height: 100%;}
.ex-display .wrapper {}
.ex-display .wrapper .item-content{background: #fff;margin-top: 15px;}
.ex-display .wrapper .item {min-height: 30px;line-height: 30px;font-size: 1.4rem;padding: 9px 0;border-bottom: solid 1px #ebebeb;margin-left: 10px;}
.ex-display .wrapper li.picture{color: #aaafb6;line-height: 25px;}
.ex-display .wrapper li.picture p{color: #212a32;}
.ex-display .wrapper .item:last-child{border-bottom: none;}
.ex-display .wrapper .item span{width: 25%;display: inline-block;}
.ex-display .wrapper .item input{border: none;width: 70%;}
.ex-display .wrapper .item label.right{float: right;padding-right: 10px;color: #aaafb6;}

.ex-display .wrapper .item-content .item-option.groupList{max-height: 200px;overflow-y: auto;padding:15px 0 15px 25px;line-height: 36px;box-sizing: border-box;font-size: 1.4rem;}
.ex-display .wrapper .item-content .item-option{font-size: 1.4rem;padding: 9px 0 9px 25px;line-height: 30px;max-height: 156px;overflow-y: scroll;}
.ex-display .wrapper .item-content .item-option div{line-height: 36px;}
.ex-display .wrapper .item-content .item-option div .option{display: inline-block;width: 20px;height: 20px;background: url(../../assets/images/noselect.png) no-repeat;background-size: 100%;vertical-align: middle;}
.ex-display .wrapper .item-content .item-option div.select{color: #0c87d5;	}
.ex-display .wrapper .item-content .item-option div.select .option{background: url(../../assets/images/select.png) no-repeat;background-size: 100%;}

.ex-display .wrapper .item .report-file {overflow: hidden;position: relative;border: dotted 1px #d8d8d8;text-align: center;}
.ex-display .wrapper .item .report-file span{cursor: pointer;display: inline-block;width: 100%;line-height: 20px;padding-top: 12px;vertical-align: top;}
.ex-display .wrapper .item .report-file .file-prew{opacity: 0;filter: alpha(opacity=0);cursor: pointer;position: absolute;left: 0;top: 0;z-index: 10;width: 100%;height: 100%;}
.UpLoadIMG{margin: 15px 0 0 0;}
.ex-display .wrapper .item .UpLoadIMG div{display: inline-block;width: 64px;height: 64px;margin: 0 9px;}
.ex-display .wrapper .item .UpLoadIMG div.report-pic {border: solid 1px #ebebeb;position: relative;vertical-align: top;}
.ex-display .wrapper .item .UpLoadIMG div.report-pic img{width: 100%;height: 100%;}
.ex-display .wrapper .item .UpLoadIMG div.report-pic .delect{position:absolute;top: -12px;right: -10px;background: #666;color: #fff;display: inline-block;width: 24px;height: 24px;text-align: center;border-radius: 50%;font-size: 24px;line-height: 20px;}
.ex-display .wrapper .item .UpLoadIMG{width: 100%;}

.ex-button{margin-top: 16px;padding: 0 15px;text-align: center;}
.ex-button button{display: block;height: 48px;width: 100%;line-height: 48px;font-size: 1.6rem;color: #fff;background: #047dcb;border-radius: 4px;}
.ex-button button:active{background: #0470b6;}
.ex-button button.disable {background-color: #999}
.ex-button button.disable:active{background-color: #999}

.ex-picker{text-align: center;display: block;line-height: 40px;font-size: 2rem;color: #26a2ff;border-bottom: solid 1px #ebebeb;box-shadow:1px 1px 1px #ebebeb }
.ex-picker{width: 100%;}
.picker-slot-wrapper,.picker-item {backface-visibility: hidden; }
.ex-picker{text-align: center;display: block;line-height: 40px;font-size: 2rem;color: #26a2ff;border-bottom: solid 1px #ebebeb;box-shadow:1px 1px 1px #ebebeb }

.ex-display .modal_BJ {background: rgba(0,0,0,0.42);width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;z-index: 999;display: table;}
.ex-display .modal_BJ .modal{display: table-cell;padding: 0 12%;vertical-align: middle;}
.ex-display .modal_BJ .modal .modal_box{background: #fff;width: 100%;border-radius: 5px;overflow: hidden;text-align: center;padding: 10px 0 0 0;}
.ex-display .modal_BJ .modal .modal_box .title{font-size: 1.6rem;}
.ex-display .modal_BJ .modal .modal_box .field{text-align: center;padding: 15px 25px;max-height: 200px;overflow-y: auto;}
.ex-display .modal_BJ .modal .modal_box .field ul li{text-align: left;font-size: 1.4rem;height: 40px;line-height: 40px;}
.ex-display .modal_BJ .modal .modal_box .field span.option{display: inline-block;background: url(../../assets/images/noselect1.png) no-repeat;background-size: 100%;width: 20px;height: 20px;float: right;margin-top: 10px;}
.ex-display .modal_BJ .modal .modal_box .field span.select{background: url(../../assets/images/select1.png) no-repeat;background-size: 100%;}
.ex-display .modal_BJ .modal .modal_box .operate{height: 46px;padding: 0;border-top: 1px solid #e5e5e5;}
.ex-display .modal_BJ .modal .modal_box .operate .link{width: 50%;display: inline-block;float: left;line-height: 46px;border-right: solid 1px #e5e5e5;box-sizing: border-box;color: #212a32;font-size: 1.4rem;}
.ex-display .modal_BJ .modal .modal_box .operate .gray{color: #596678;}
.ex-display .modal_BJ .modal .modal_box .operate .link:last-child{border-right: none;}
.ex-display .modal_BJ .modal .modal_box .operate .link:active{background: #ebebeb}
.preview{position: absolute;z-index: 999;left: 0px;top: 0;}
</style>